<template>
  <div class="AsyncLoading">
    <h1>AsyncLoading</h1>
    <!-- 地图容器元素 -->
    <div id="container"></div>
  </div>
</template>

<script>
import BaiduMap from "@/assets/js/map.js";
export default {
  name: "AsyncLoading",
  data() {
    return {};
  },
  mounted() {
    // 百度地图初始化
    BaiduMap.init().then((BMap) => {
      console.log(BMap);
      console.log("加载成功...");
      // 百度地图初始化
      this.mapInit();
    });
  },
  methods: {
    // 百度地图初始化
    mapInit() {
      // 创建地图实例
      let map = new BMap.Map("container", {
        // JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码
        enableBizAuthLogo: false,
      });
      // 创建点坐标
      // Point类描述了一个地理坐标点，其中第一个表示经度，第二个表示纬度。
      let point = new BMap.Point(114.316, 30.581);
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 12);
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      // 定位 默认位于地图左下方
      map.addControl(new BMap.GeolocationControl());
      // 创建标注
      let marker = new BMap.Marker(point);
      // 将标注添加到地图中
      map.addOverlay(marker);
      // 监听地图点击事件 lng表示经度，lat表示纬度
      map.addEventListener("click", function (e) {
        console.log("当前点击的坐标：", e.point.lng + ", " + e.point.lat);
        // 清除地图上所有覆盖物;
        map.clearOverlays();
        // 创建点坐标
        // Point类描述了一个地理坐标点，其中第一个表示经度，第二个表示纬度。
        let point = new BMap.Point(e.point.lng, e.point.lat);
        // 创建标注
        let mk = new BMap.Marker(point);
        // 将标注添加到地图中
        map.addOverlay(mk);
        // 将地图的中心点更改为给定的点。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果
        map.panTo(point);
      });

      // 浏览器定位精度依赖浏览器自身特性，IP定位的精度值为城市级别。
      // 优先调用浏览器H5定位接口，如果失败会调用IP定位
      // 浏览器会弹窗向用户索要授权

      // 浏览器定位
      // let geolocation = new BMap.Geolocation();
      // geolocation.getCurrentPosition(function (r) {
      //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      //     // 	清除地图上所有覆盖物
      //     map.clearOverlays();
      //     // 创建标注
      //     let mk = new BMap.Marker(r.point);
      //     // 将标注添加到地图中
      //     map.addOverlay(mk);
      //     // 将地图的中心点更改为给定的点。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果
      //     map.panTo(r.point);
      //     console.log("您的位置：" + r.point.lng + "," + r.point.lat);
      //   } else {
      //     console.log("failed" + this.getStatus());
      //   }
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.AsyncLoading {
  h1 {
    font-size: 20px;
  }
  #container {
    width: 500px;
    height: 500px;
  }
}
</style>
